page{
	background-color: #F7F7F7;
}

.contanier {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	width: 100%;
	background-color: #F7F7F7;
	position: relative;
	.header {
		height: 120rpx;
		width: 100%;
		padding: 0 130rpx;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.left {
			display: flex;
			align-items: center;
			font-size: 30rpx;
			.img {
				width: 30rpx;
				height: 26rpx;
			}
		}
		.middle {
			width: 1rpx;
			height: 40rpx;
			background-color: #D8D8D8;
		}
		.right {
			display: flex;
			align-items: center;
			font-size: 30rpx;
			color: #333333;
			.img {
				width: 35rpx;
				height: 35rpx;
			}
		}
	}
	.tabs {
		margin-top: 20rpx;
	}
	.shop-list {
		margin-top: 26rpx;
		padding: 0 30rpx;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		.commodity {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			.item {
				width: 333rpx;
				height: 377rpx;
				border-radius: 10rpx;
				background-color: #fff;
				display: flex;
				flex-direction: column;
				margin-bottom: 22rpx;
				.img {
					width: 333rpx;
					height: 244rpx;
					border-radius: 10rpx 10rpx 0rpx 0rpx;
				}
				.item-text {
					margin-left: 26rpx;
					margin-top: 22rpx;
					display: flex;
					flex-direction: column;
				}
			}
		}
		.empty-wrap {
		  display: flex;
		  flex-direction: column;
		  padding: 60rpx 0 80rpx;
		  align-items: center;
		  .empty-img {
		    width: 400rpx;
		    height: 400rpx;
		  }

		  .tips {
		    font-size: 30rpx;
		    color: #999;
		  }
		}
	}
}